<!DOCTYPE html>
<html lang="${lang,escape}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="description" content="${AppName!}">
    <title>${AppName!}</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="${base!}/assets/platform/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css">
    <link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/common.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/main.css?v=${thisTimes}">
    <link rel="stylesheet" href="${base!}/assets/platform/css/elmain.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/panel.css">
    <!-- import Vue before Element -->
    <script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
    <script src="${base!}/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
    <script src="${base!}/assets/platform/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
    <script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
    <script src="${base!}/assets/platform/plugins/bootstrap/js/bootstrap.js"></script>
    <!-- Array数组增加findIndex等方法,TreeTable用得到,兼容IE8 -->
    <script src="${base!}/assets/platform/plugins/polyfill/polyfill.js"></script>
    <!-- 时间日期处理工具类 -->
    <script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
    <!-- 浏览器通知 -->
    <script src="${base!}/assets/platform/plugins/push/push.min.js"></script>
    <script src="${base!}/assets/platform/js/main.js"></script>
    <script src="${base!}/assets/platform/js/offscreen.js"></script>
    <!--# if(@shiro.getPrincipalProperty('loginTheme')!=null){ #-->
    <link rel="stylesheet" href="${base!}/assets/platform/css/skins/${@shiro.getPrincipalProperty('loginTheme')}"
          id="skin">
    <!--# }else{ #-->
    <link rel="stylesheet" href="${base!}/assets/platform/css/skins/palette.css" id="skin">
    <!--# } #-->
    <!--#
       var isLeftMenu = false;
       if(@shiro.getPrincipalProperty('menuTheme') == "top"){
           isLeftMenu = false;
       }else if(@shiro.getPrincipalProperty('menuTheme') == "left"){
           isLeftMenu = true;
       }
       isLeftMenu = true;

   #-->
    <script type="text/javascript">
        var base = "${base!}";
        var loginPjax = "${@shiro.getPrincipalProperty('loginPjax')}";
        var isLeftMenu = "${isLeftMenu!}";

        ///自定义去除空格指令，  用法直接 v-trim  ，，通过change事件，不要直接用update钩子
        Vue.directive('trim', {
            unbind(el) {
                el.removeEventListener('change');
            },
            bind(el, binding, vnode) {
                el.addEventListener('change', function (event){
                    var componentName;
                    if (vnode.componentInstance) {
                        componentName = vnode.componentInstance.$options.name;
                    } else {
                        componentName = el.tagName;
                    }
                   // console.log(componentName)
                    if(componentName=='ElInput')//如果是el-input标签,则去除空格
                    {
                        const value = event.target.value
                        vnode.data.model.callback(value.trim())
                    }
                });
            },
            /*update: _.debounce(function(el, binding, vnode, oldVnode) {
                console.log('Updated input value:', vnode.componentInstance.inputValue)
            }, 500)*/
        });
        const myDirective = {
        }
    </script>
</head>
<body>
<div class="gallery-loader" style="background-color:transparent;">
    <div class="loader"></div>
</div>
<div class="playground hidden-xs">
    <div class="options">
        <div class="pg-close ti-close"></div>
        <div class="options-container color-options">
            <h6>${msg['index.themes']}</h6>
            <a onclick="sublime.changeTheme('palette.css')" href="${base!}/assets/platform/css/skins/palette.css"
               class="css_orange cs_color cs_1 <!--#if(@shiro.getPrincipalProperty('loginTheme')==null || 'palette.css' == @shiro.getPrincipalProperty('loginTheme')){#-->active<!--#}#-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.4.css')" href="${base!}/assets/platform/css/skins/palette.4.css"
               class="css_orange cs_color cs_4 <!--#if('palette.4.css' == @shiro.getPrincipalProperty('loginTheme')){#-->active<!--# }#-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.2.css')" href="${base!}/assets/platform/css/skins/palette.2.css"
               class="css_orange cs_color cs_2 <!--#if('palette.2.css' == @shiro.getPrincipalProperty('loginTheme')){#-->active<!--# }#-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.3.css')" href="${base!}/assets/platform/css/skins/palette.3.css"
               class="css_orange cs_color cs_3 <!--#if('palette.3.css' == @shiro.getPrincipalProperty('loginTheme')){#-->active<!--# }#-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
        </div>
        <div class="options-container">
            <h6>${msg['index.layout']}</h6>
            <a class="pg-val toggle-sidebar toggle-active <!--#if(@shiro.getPrincipalProperty('loginSidebar')){#--> active<!--#}#-->"
               href="javascript:;">
                <img src="${base!}/assets/platform/img/panel/small.png" alt="">
            </a>
            <a class="pg-val toggle-scroll toggle-active <!--#if(@shiro.getPrincipalProperty('loginScroll')){#-->active<!--#}#-->"
               href="javascript:;">
                <img src="${base!}/assets/platform/img/panel/scroll.png" alt="">
            </a>
            <a class="pg-val toggle-boxed toggle-active <!--#if(@shiro.getPrincipalProperty('loginBoxed')){#-->active<!--#}#-->"
               href="javascript:;">
                <img src="${base!}/assets/platform/img/panel/boxed.png" alt="">
            </a>
        </div>
        <!--<div class="options-container">
            <h6>菜单位置</h6>
            <div class="layout-toggleMenu__item ${isLeftMenu?'is-active':''}" data-position="left">左侧</div>
            <div class="layout-toggleMenu__item ${!isLeftMenu?'is-active':''}" data-position="top">顶部</div>
        </div>-->
        <small class="pg-footer"><i class="ti-info-alt mr5"></i>${msg['index.panel']}</small>
    </div>
</div>
<div id="mainApp"
     class="app <!--#if(@shiro.getPrincipalProperty('loginSidebar')){#--> small-menu <!--#}#--> <!--#if(@shiro.getPrincipalProperty('loginScroll')){#--> fixed-scroll <!--#}#--> <!--#if(@shiro.getPrincipalProperty('loginBoxed')){#--> boxed <!--#}#-->">
    <header class="header header-fixed navbar">
        <div class="brand">

            <a href="javascript:;" class="ti-menu off-left visible-xs" data-toggle="offscreen" data-move="ltr"></a>


            <a href="${base!}/platform/home" data-pjax class="navbar-brand">
                <!--<img src="${base!}/assets/platform/img/logo.png" alt=""-->
                <!-- class="o_img <!--#if(!@shiro.getPrincipalProperty('loginSidebar')){#-->o_hide<!--#}#-->">
                <!--<span class="heading-font o_img <!--#if(@shiro.getPrincipalProperty('loginSidebar')){#-->o_hide<!--#}#-->">-->
                <!--<img src="${base!}/assets/platform/img/logoa.png">
            </span>-->
                <span style="margin: auto">${AppShrotName!}</span>
            </a>
        </div>

        <ul class="nav navbar-nav">
            <li class="hidden-xs">
                <!-- toggle small menu -->
                <a href="javascript:;" class="toggle-sidebar">
                    <i class="ti-menu"></i>
                    <span id="title"></span>
                </a>
                <!-- /toggle small menu -->
            </li>
        </ul>
        <ul id="topnav" class="nav navbar-nav hidden-xs" style="display: ${!isLeftMenu?'initial':'none'};">
            <!--#
            var secondMenus=@shiro.getPrincipalProperty('secondMenus');
            for(firstMenu in @shiro.getPrincipalProperty('firstMenus')){
           #-->
            <li class="dropdown">

                <!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){#-->
                <a href="javascript:;" data-toggle="dropdown">
                    <span>
                        <!--#if(lang=="zh_CN"){#-->${firstMenu.name}<!--#}else{#-->${firstMenu.aliasName}
                        <!--#}#--></span>
                    <b class="caret"></b>
                </a>
                <!--#}else{#-->
                <a href="<!--# if(!isEmpty(firstMenu.href)){ #--><!--#if(@string.startWith(firstMenu.href,'/')){#-->${base}${firstMenu.href!}<!--#}else{#-->${firstMenu.href!}<!--#}#--> <!--# }else{ #-->javascript:;<!--# } #-->"
                <!--#if(@string.startWith(firstMenu.target,'_')){#-->target="${firstMenu.target!}"<!--#}else{#-->
                ${firstMenu.target!}<!--#}#--> >
                <span>
                        <!--#if(lang=="zh_CN"){#-->${firstMenu.name}<!--#}else{#-->${firstMenu.aliasName}
                    <!--#}#--></span></a>
                <!--#}#-->
                <!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){#-->
                <ul class="dropdown-menu topnav">
                    <!--# for(secondMenu in @secondMenus.get(firstMenu.path)){ #-->
                    <li class="dropdown">
                        <a href="<!--# if(!isEmpty(secondMenu.href)){ #--><!--#if(@string.startWith(secondMenu.href,'/')){#-->${base}${secondMenu.href!}<!--#}else{#-->${secondMenu.href!}<!--#}#--> <!--# }else{ #-->javascript:;<!--# } #-->"
                        <!--#if(@string.startWith(secondMenu.target,'_')){#-->target="${secondMenu.target!}"
                        <!--#}else{#--> ${secondMenu.target!}<!--#}#--> >
                        <!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #--><i class="toggle-accordion"></i>
                        <!--#}#-->
                        <span><!--#if(lang=="zh_CN"){#-->${secondMenu.name}<!--#}else{#-->${secondMenu.aliasName}
                            <!--#}#--></span>
                        </a>
                        <!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
                        <ul class="sub-menu">
                            <!--# for(thMenu in @secondMenus.get(secondMenu.path)){ #-->
                            <li class="clearfix">
                                <a <!--# if(!isEmpty(thMenu.href)){ #-->href="<!--#if(@string.startWith(thMenu.href,'/')){#-->${base}${thMenu.href!}<!--#}else{#-->${thMenu.href!}<!--#}#-->" <!--# }else{ #-->href="javascript:;"<!--# } #-->
                                <!--#if(@string.startWith(thMenu.target,'_')){#-->target="${thMenu.target!}"
                                <!--#}else{#--> ${thMenu.target!}<!--#}#--> >
                                <span><!--#if(lang=="zh_CN"){#-->${thMenu.name}<!--#}else{#-->${thMenu.aliasName}
                                    <!--#}#--></span>
                                </a>
                            </li><!--# }#-->
                        </ul><!--#}#-->
                    </li><!--# } #-->
                </ul><!--# } #-->
            </li><!--# }#-->
            <!--# if(@shiro.hasRole("wizzer")){#-->
            <!--项目开发请删除-->
            <!--<li>
                <a href="${base}/platform/sys/test" data-pjax>捐赠管理</a>
            </li>-->
            <!--# }#-->

        </ul>
        <ul class="nav navbar-nav navbar-right">
<!--
            <li class="dropdown hidden-xs">
                <a href="javascript:;" data-toggle="dropdown">
                    <i class="ti-more-alt"></i>
                </a>
                <ul class="dropdown-menu animated zoomIn">
                    <li class="dropdown-header">Quick Links</li>
                    <li>
                        <a href="javascript:;">Start New Campaign</a>
                    </li>
                    <li>
                        <a href="javascript:;">Review Campaigns</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:;">Settings</a>
                    </li>
                    <li>
                        <a href="javascript:;">Wish List</a>
                    </li>
                    <li>
                        <a href="javascript:;">Purchases History</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:;">Activity Log</a>
                    </li>
                    <li>
                        <a href="javascript:;">Settings</a>
                    </li>
                </ul>
            </li>-->
                <!--<li class="language-dropdown dropdown hidden-xs">
                    <a href="javascript:;" data-toggle="dropdown" id="language">
                        &lt;!&ndash;# if(lang==null||lang=="zh_CN"){ #&ndash;&gt;
                        <img src="${base!}/assets/platform/img/flags/cn.png" class="flag"/>
                        &lt;!&ndash;#}else{#&ndash;&gt;
                        <img src="${base!}/assets/platform/img/flags/us.png" class="flag"/>
                        &lt;!&ndash;#}#&ndash;&gt;
                        <ul class="dropdown-menu dropdown-menu-right animated fadeInUp">
                            <li>
                                <a href="javascript:sublime.changeLang('en_US');">
                                    <img src="${base!}/assets/platform/img/flags/us.png" class="flag"/>
                                    <span class="language">English</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:sublime.changeLang('zh_CN');">
                                    <img src="${base!}/assets/platform/img/flags/cn.png" class="flag"/>
                                    <span class="language">中文</span>
                                </a>
                            </li>
                        </ul>
                    </a>
                </li>-->
            <li class="notifications dropdown">
                <a href="javascript:;" data-toggle="dropdown">
                    <span class="hidden-xs ml10">特殊字符</span>
                    <i class="ti-angle-down ti-caret hidden-xs"></i>
                </a>
                <div class="dropdown-menu fadeInLeft">
                    <div style="margin: 20px;word-wrap:break-word;max-width: 300px" id="character">
                            xxx
                    </div>
                </div>
            </li>
            <li class="notifications dropdown">
                <a href="javascript:;" data-toggle="dropdown">
                    <i class="ti-bell"></i>
                    <div id="innerMsg" class="badge badge-top bg-danger animated flash" style="display:none;">
                        <span id="innerMsgNum">0</span>
                    </div>
                </a>
                <div class="dropdown-menu animated fadeInLeft">
                    <div class="panel panel-default no-m">
                        <div class="panel-heading small"><b>${msg['index.notifications.title']}</b>
                        </div>
                        <div id="innerMsgList" class="list-group" style="min-width: 500px;max-height: 450px;overflow: auto">

                        </div>


                        <div class="panel-footer">
                            <a href="${base}/platform/sys/msg/user/all">${msg['index.notifications.see']}</a>
                        </div>
                    </div>
                </div>
            </li>

            <li class="off-right">
                <a href="javascript:;" data-toggle="dropdown">
                    <span class="hidden-xs ml10">${@shiro.getPrincipalProperty('username')}</span>
                    <i class="ti-angle-down ti-caret hidden-xs"></i>
                </a>
                <ul class="dropdown-menu animated fadeInLeft">
                    <!--<li>
                        <a href="${base!}/platform/sys/user/custom" data-toggle="modal"
                           data-target="#homeDetail">${msg['index.custommenu']}</a>
                    </li>-->
                    <li class="dropdown hidden-xs">
                        <a href="javascript:;" class="pg-toggle">
                            ${msg['index.user.layout']}
                        </a>
                    </li>
                    <li class="dropdown hidden-xs">
                        <a href="${base!}/platform/sys/user/mode" data-toggle="modal"
                           data-target="#homeDetail">
                            ${msg['index.user.mode']}
                        </a>
                    </li>
                    <li>
                        <a href="${base!}/platform/sys/user/pass" data-toggle="modal"
                           data-target="#homeDetail">${msg['index.user.password']}</a>
                    </li>
                    <li>
                        <a href="${base!}/platform/sys/user/userDetail" data-toggle="modal"
                           data-target="#homeDetail">个人信息</a>
                    </li>
                </ul>
            </li>
            <li class="off-right" id="logout">
                <a href="javascript:void(0)" @click="logout()">
                    <i class="ti-power-off"></i>
                </a>
            </li>
        </ul>
    </header>
    <section class="layout">
        <!-- sidebar menu -->
        <aside class="sidebar offscreen-left">
            <!-- main navigation -->
            <nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true"
                 data-wheel-step="10">
                <ul class="nav">
                    <li>
                        <!--<a href="javascript:;">
                            &lt;!&ndash;#if(!isEmpty(@shiro.getPrincipalProperty('customMenus'))){#&ndash;&gt;
                            <i class="toggle-accordion"></i>
                            &lt;!&ndash;#}#&ndash;&gt;
                            <i class="ti-heart"></i>
                            <span>${msg['index.custommenu']}</span>
                        </a>-->
                        <!--#if(!isEmpty(@shiro.getPrincipalProperty('customMenus'))){#-->
                        <ul class="sub-menu">
                            <!--#for(o in @shiro.getPrincipalProperty('customMenus')){#-->

                            <li>
                                <a <!--#if(!isEmpty(o.href)){#-->href="${base}${o.href}"
                                <!--#if('data-pjax'==o.target){#-->data-pjax<!--#}}else{ #--> href="javascript:;"
                                <!--#}#--> >
                                <span><!--#if(lang=="zh_CN"){#-->${o.name}<!--#}else{#-->${o.aliasName}<!--#}#--></span>
                                </a>
                            </li>

                            <!--#}#-->
                        </ul>
                        <!--#}#-->
                    </li>

                </ul>

                <ul id="leftMenu" class="nav leftMenu" style="display: ${isLeftMenu?'initial':'none'};">
                    <!--#
                        for(firstMenu in @shiro.getPrincipalProperty('firstMenus')){
                    #-->
                    <li>
                        <a <!--# if(!isEmpty(firstMenu.href)){ #-->href="<!--#if(@string.startWith(firstMenu.href,'/')){#-->${base}${firstMenu.href!}
                        <!--#}else{#-->${firstMenu.href!}<!--#}#--> "  <!--#if(@string.startWith(firstMenu.target,'_')){#-->target="${firstMenu.target!}"
                        <!--#}else{#--> ${firstMenu.target!}<!--#}#-->  <!--# }else{ #-->href="javascript:;"<!--# } #--> <!--# if(!isEmpty(firstMenu.href)){ #-->onclick="setTitle('${firstMenu.name}')"<!--#}#--> >
                        <!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){ #-->
                        <i class="toggle-accordion"></i>
                        <!--# } #-->
                        <!--# if(!isEmpty(firstMenu.icon)){ #-->
                        <i class="${firstMenu.icon!}"></i>
                        <!--# }else{ #-->
                        <i class="ti-map"></i>
                        <!--# } #-->
                        <span>${ lang == "zh_CN" ?firstMenu.name :firstMenu.aliasName}</span><!--左侧 一级菜单-->
                        </a>
                        <!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){ #-->
                        <ul class="sub-menu">
                            <!--# for(secondMenu in @secondMenus.get(firstMenu.path)){ #-->
                            <li>
                                <a <!--# if(!isEmpty(secondMenu.href)){ #-->href="<!--#if(@string.startWith(secondMenu.href,'/')){#-->${base}${secondMenu.href!}<!--#}else{#-->${secondMenu.href!}<!--#}#-->"
                                <!--#if(@string.startWith(secondMenu.target,'_')){#-->target="${secondMenu.target!}"
                                <!--#}else{#--> ${secondMenu.target!}<!--#}#--> <!--# }else{ #-->href="javascript:;"
                                <!--# } #--> <!--# if(!isEmpty(secondMenu.href)){ #-->onclick="setTitle('${secondMenu.name}')"<!--# } #--> >
                                <!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
                                <i class="toggle-accordion"></i>
                                <!--# } #-->
                                <!--# if(!isEmpty(secondMenu.icon)){ #-->
                                <i class="leftMenu__twoIcon ${secondMenu.icon!}"></i>
                                <!--# }else{ #-->
                                <i class="leftMenu__twoIcon ti-map" ></i>
                                <!--# } #-->
                                <span>${ lang == "zh_CN" ?secondMenu.name :secondMenu.aliasName}</span><!--左侧 二级菜单-->
                                </a>
                                <!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
                                <ul class="sub-menu">
                                    <!--# for(thMenu in @secondMenus.get(secondMenu.path)){ #-->
                                    <li>
                                        <a <!--# if(!isEmpty(thMenu.href)){ #-->href="<!--#if(@string.startWith(thMenu.href,'/')){#-->${base}${thMenu.href!}<!--#}else{#-->${thMenu.href!}<!--#}#-->"
                                        <!--#if(@string.startWith(thMenu.target,'_')){#-->target="${thMenu.target!}"
                                        <!--#}else{#--> ${thMenu.target!}<!--#}#--> <!--# }else{ #-->href="javascript:;"
                                        <!--# } #--> <!--# if(!isEmpty(thMenu.href)){ #-->onclick="setTitle('${thMenu.name}')" <!--# } #-->>
                                        <span>${ lang == "zh_CN" ?thMenu.name :thMenu.aliasName}</span>
                                        </a>
                                    </li>
                                    <!--# } #-->
                                </ul>
                                <!--# } #-->
                            </li>
                            <!--# } #-->
                        </ul>
                        <!--# } #-->
                    </li>

                    <!--# } #-->
                </ul>

                <ul id="leftnav" class="nav" style="display: ${!isLeftMenu?'initial':'none'};"></ul>
            </nav>
        </aside>
        <!-- main content -->
        <section class="main-content" id="container">
            ${layoutContent}
        </section>
    </section>
</div>
<div id="homeDetail" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>
<div id="dialogOffline" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="el-dialog__header">
                <button type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close"
                        class="el-dialog__headerbtn"><i
                        class="el-dialog__close el-icon el-icon-close"></i></button>
                <h4 class="modal-title">系统通知</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        您的帐号在其他地方登录，您已被迫下线，如果不是您本人操作，请及时修改密码。
                    </div>
                </div>
            </div>
            <div class="el-dialog__footer">
                <span class="dialog-footer">
                    <a type="button" class="el-button el-button--primary" href="${base}/platform/login/logout">
                        <span>确 定</span>
                    </a>
                </span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var ws;

    function setTitle(title){
        $("#title").html(title)
    }

    function connect() {
        var WS_URL = window.location.host + "${base}/websocket";
        if (window.location.protocol == 'http:') {
            ws = new WebSocket("ws://" + WS_URL);
        } else {
            ws = new WebSocket("wss://" + WS_URL);
        }
    }

    function ws_ping() {
        if (ws) {
            ws.send(JSON.stringify({room: "${@shiro.getPrincipalProperty('loginname')}", "action": "msg"}));
        } else {
            connect();
        }
    }

    function msg_get(list) {
        $("#innerMsgList").html("");
        var msgList = "";
        $.each(list, function (index, o) {
            var url = base + o.url;
            msgList +=
                '<li class="list-group-item">' +
                '<a href="' + url + '">' +
                '<div class="m-body">' +
                '<span >' + o.type + ' : </span>' +
                '<span >' + o.title + '</span>' +
                '<span class="time small">' + o.time + '</span>' +
                '</div></a></li>';
        });
        $("#innerMsgList").html(msgList);
    }
    // 复制文本内容方法一
    async function copyContent (content) {
        // 复制结果
        let copyResult = true
        // 设置想要复制的文本内容
        const text = content || '复制内容为空哦~';
        // 判断是否支持clipboard方式
        if (!!window.navigator.clipboard) {
            // 利用clipboard将文本写入剪贴板（这是一个异步promise）
            await window.navigator.clipboard.writeText(text).then((res) => {
                //console.log('复制成功,已复制到剪切板');
                alert("已复制到剪切板")
            }).catch((err) => {
                //console.log('复制失败--采取第二种复制方案', err);
                // clipboard方式复制失败 则采用document.execCommand()方式进行尝试
                copyResult =  copyContent2(text)
            })
        } else {
            // 不支持clipboard方式 则采用document.execCommand()方式
            copyResult =  copyContent2(text)
        }
        // 返回复制操作的最终结果
        return copyResult;
    }
    // 复制文本内容方法二
    function copyContent2 (text) {
        // 复制结果
        let copyResult = true
        // 创建一个input元素
        let inputDom = document.createElement('textarea');
        // 设置为只读 防止移动端手机上弹出软键盘
        inputDom.setAttribute('readonly', 'readonly');
        // 给input元素赋值
        inputDom.value = text;
        // 将创建的input添加到body
        document.body.appendChild(inputDom);
        // 选中input元素的内容
        inputDom.select();
        // 执行浏览器复制命令
        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
        // Input要在正常的编辑状态下原生复制方法才会生效
        const result = document.execCommand('copy')
        // 判断是否复制成功
        if (result) {
            //console.log('复制成功,已复制到剪切板');
            alert("已复制到剪切板")
        } else {
            //console.log('复制失败');
            copyResult = false
        }
        // 复制操作后再将构造的标签 移除
        document.body.removeChild(inputDom);
        // 返回复制操作的最终结果
        return copyResult;
    }

    $(document).ready(function () {
        //菜单位置切换
        function showLeftMenu() {
            $(".leftMenu a[href*='" + location.pathname + "']")
                .parent("li").addClass("active")
                .parent(".sub-menu").css({display: "block"})
                .parents("li").addClass("open")
                .parent(".sub-menu").css({display: "block"});

            var title = $(".leftMenu a[href*='" + location.pathname + "']")
                .parent("li").children("a").eq(0).children("span").eq(0).html();
            $("#title").html(title);
        }

        if (isLeftMenu=="true") {
            showLeftMenu();
        }

        $(".layout-toggleMenu__item").on("click", function () {
            $(".layout-toggleMenu__item").toggleClass("is-active");
            var position = $(this).data("position");

            $.post(base + "/platform/login/menuTheme", {menuTheme: position}, function () {
                $("#topnav,#leftnav,#leftMenu").toggle();
                if (position === "left") showLeftMenu();
            })
        });
        //加载特殊字符
        $.post(base + "/platform/bus/character/list", {}, function (data) {
            var html = "";
            if (data.code == 0) {
                $.each(data.data, function (index, o) {
                    var url = base + o.url;
                    html +=
                        '<a class="character" title="'+o.remark+'" href="javascript:copyContent(\''+o.txt+'\')">' +
                        '<span >' + o.txt + '</span>' +
                        '</a>&nbsp;&nbsp;'
                });
            } else {
                html="暂无特殊字符，请联系管理员新增"
            }
            $("#character").html(html);
        }, "json");



        //浏览器通知 + websocket
        if (${@config.getOrDefault("WebNotification",true)}) {
            Push.Permission.request(function () {
                if (parseInt("${@shiro.getPrincipalProperty('loginCount')}") > 0 || !${@config.getOrDefault("WebNotification",true)})
                    return;
                Push.create('Thank You!', {
                    body: '欢迎选用 NutzWk!',
                    icon: base + '/assets/platform/img/notice.png',
                    timeout: 5000,
                    onClick: function () {
                        window.open("https://wizzer.cn"); //just added the window.open to a OnClick event.
                        this.close();
                    },
                    vibrate: [100, 100, 100]
                });
            }, function () {

            });
        }
        try {
            connect();
            ws.onmessage = function (event) {
                var re = JSON.parse(event.data);
               // console.log(re)
                if (re.action == "notify" && Push.Permission.has() && ${@config.getOrDefault("WebNotification",true)}) {
                    Push.create(re.title, {
                        body: re.body,
                        icon: base + '/assets/img/notice.png',
                        timeout: 8000,
                        onClick: function () {
                            if (re.url) {
                                window.open(base + re.url);
                            } //just added the window.open to a OnClick event.
                            this.close();
                        },
                        vibrate: [100, 100, 100]
                    });
                } else if (re.action == "innerMsg") {
                    if (re.size > 0) {
                        $("#innerMsgNum").html(re.size);
                        $("#innerMsg").show();
                    } else {
                        $("#innerMsg").hide();
                    }
                    msg_get(re.list);
                } else if (re.action == "offline") {
                    $("#dialogOffline").modal().show();
                    $("#okOffline").on("click", function () {
                        window.location.href = "${base}/platform/login";
                    });
                }
            };
            ws.onopen = function (event) {
                ws.send(JSON.stringify({
                    room: "${@shiro.getPrincipalProperty('loginname')}:${@shiro.getSessionId()}",
                    "action": "join"
                }));
                ws_ping();
            };
            //通知心跳时间500毫秒，不考虑性能问题
            setInterval("ws_ping()", 2000);
            //以下判断是否关闭浏览器,不兼容ie8,9,10
            if (ws) {
                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
                var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
                var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
                var isIE11 = userAgent.indexOf("rv:11.0") > -1; //判断是否是IE11浏览器
                var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
                if (!isIE && !isEdge && !isIE11) {//兼容chrome和firefox
                    var _beforeUnload_time = 0, _gap_time = 0;
                    var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1;//是否是火狐浏览器
                    window.onunload = function () {
                        _gap_time = new Date().getTime() - _beforeUnload_time;
                        if (_gap_time <= 5) {
                            ws.send(JSON.stringify({
                                room: "${@shiro.getPrincipalProperty('loginname')}:${@shiro.getSessionId()}",
                                "action": "left"
                            }));
                        } else {//浏览器刷新
                        }
                    };
                    window.onbeforeunload = function () {
                        _beforeUnload_time = new Date().getTime();
                        if (is_fireFox) {//火狐关闭执行
                            ws.send(JSON.stringify({
                                room: "${@shiro.getPrincipalProperty('loginname')}:${@shiro.getSessionId()}",
                                "action": "left"
                            }));
                        }
                    };
                }
            }
        } catch (ex) {
            if (console)
                console.info(ex);
        }
    });



    new Vue({
        el: "#logout",
        data() {
            return {};
        },
        created() {

        },
        methods: {
            logout(){
                var self = this;
                self.$confirm('确定退出系统？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (a, b) {
                        if ("confirm" == a) {//确认后再执行
                            window.location="${base!}/platform/login/logout";
                        }
                    }
                });

            }
        }
    })
</script>
<style>
    .character{
        transition: background-color 0.3s; /* 平滑过渡颜色 */
        font-size: 18px;
    }
    .character :hover{
        color: #00c1de;
        background-color: #f0f7ff;
    }
</style>
</body>
</html>
